<template>
    <div class="box_alarm">
        <MoodalTitle :title="'车辆在线情况'" />
        <div class="flax">
            <!-- 左 -->
            <div class="box_left">
                <p class="box_wc"><span>洒水车: <i style="font-size: 2rem; margin-left: 1rem;"><span style="color: #54FF00;">{{ form.NumberOfSprinklerOnline }}</span>/{{ form.NumberOfSprinkler }}</i></span></p>
            </div>
            <!-- 右 -->
            <div class="box_r">
                <p class="box_wc"><span>垃圾清运车: <i style="font-size: 2rem; margin-left: 1rem;"><span style="color: #54FF00;">{{ form.NumberOfGarbageTruckOnline }}</span>/{{ form.NumberOfGarbageTruck }}</i></span></p>
            </div>
            <!-- 下 -->
            <div class="box_b">
                <p class="box_dl"><span>机扫车: <i style="font-size: 2rem; margin-left: 1rem;"><span style="color: #54FF00;">{{ form.NumberOfSweeperOnline }}</span>/{{ form.NumberOfSweeper }}</i></span></p>
            </div>
        </div>
    </div>
</template>
<script>
import {ZongHeZhTiFaDB} from '@/api/zhangzi/index'
import MoodalTitle from '@/components/ModalTitle/Index.vue'
export default {
    components: { MoodalTitle },
    data() {
        return {
            form:{}
        }
    },
    mounted(){
        this.getZhztaLst()
    },
    methods:{
        // 车辆在线情况
         getZhztaLst() {
            ZongHeZhTiFaDB.zongheZhiFaCheYunXingAPI().then(res =>{
                console.log(res,'车辆在线情况');
                if(res.code == 200){
                    this.form = res.data
                }
            })
    }
}
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 47.5rem !important;
    margin-bottom: 1.9rem;
}

.flax {
    position: relative;
}

.box_left {
    width: 34.9rem;
    height: 13.3rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/roadl2.png) no-repeat;
    background-size: cover;
}

.box_r {
    position: absolute;
    right: 0;
    top: 12.5rem;
    width: 34.9rem;
    height: 13.3rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/station2\ \(2\).png) no-repeat;
    background-size: cover;
}

.box_b {
    // float: right;
    position: absolute;
    left: 0;
    bottom: -24.2rem;
    width: 34.9rem;
    height: 13.3rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/betaWc2.png) no-repeat;
    background-size: cover;
}
.box_wc{
    position: absolute;
    left: 42%;
    top: 44%;
    transform: translate(-50%,-50%);
    font-size: 1.6rem;
    color: #fff;
}
.box_dl{
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-40%,-50%);
    font-size: 1.6rem;
    color: #fff;
}
</style>